<template>
    <!-- 这个搜索框是采用父传子，子传父的形式 -->
    <div class="main"    style="width: 100%;height:100%;border:1px solid #D6D6D6;">
        <div class="main-title" style="width: 100%;height: 20px;background: darkseagreen;padding-left: 8px;padding-right: 8px;  ">
             <div style="float: left;font-size: 13px;">数据检索</div>
            <div style="float: right;" @click="handleClose" > <el-button type="success" style="width: 16px;height: 16px;"icon="CloseBold" circle /> </div>
        
        </div>
        <div style="width: 100%;height: calc(100% - 25px);border-left: 2px solid darkseagreen;border-right: 2px solid darkseagreen;">
            
        <vxe-table border 
        ref="tableRef" 
       

        :row-config="{isCurrent: true, isHover: true }" 
        :column-config="{resizable: true}"
        :edit-config="{ mode: 'cell', trigger: 'click' }"
        :data=" props.data"  style="width: 100%;cursor: pointer;" 
        height="100%" @cell-dblclick="xuanzhongOk">

        <vxe-column type="seq" title="序号" width="40" />
        <vxe-column v-for="(item,index) in  props.tableTitle" align="center"  
        :key="index" :field="item.value" :title="item.label" :width="item.widths" />
        </vxe-table>

        </div>
        <div class="main-title" style="width: 100%;
        height: 5px;background: darkseagreen;
        padding-left: 8px;padding-right: 8px;  ">
        </div>
    </div> 

     
    
</template>

<script setup>
 
import { defineEmits ,defineProps  } from 'vue';
import { CloseBold } from '@element-plus/icons-vue';

const props = defineProps({
    data: {
       
      default: []
    },
    tableTitle: {
      
      default: [{value:'',label:'',widths:''} ]
    },
    dataCell:{
      default: []
    } 

});


//定义一个传给父级的close关闭方法和选择数据的方法
const emits = defineEmits(['close','xuanzhong']);
//定义一个子组件关闭方法，该方法执行的时候触发传给父级的close方法
const handleClose = () => {
  console.log('关闭了');
  emits('close');
};


 
//定义一个选择方法，双击行的时候给父组件传一个xuanzhong方法和当前行的数据
const xuanzhongOk = (row) => {
 
  emits('xuanzhong',row.row);
 
};


 
 
</script>

<style lang='scss' scoped></style>
